import { createRouter, createWebHashHistory } from "vue-router";
//引入页面


const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')
const userCenter = () => import("../views/user-center/index.vue")
const userProfile = () => import("../views/user-center/Profile.vue")
const userSettings = () => import("../views/user-center/Settings.vue")
const NotFound = () => import("../views/user-center/404.vue")
const VuexPage = () => import("../views/Vuex.vue")
// 引入ElementPlus组件页
const ElementPlus = () => import("../views/ElementPlus.vue")
// //引入ListDemo页
// const ListDemo =() => import("../views/ListDemo.vue")
// //引入组合式api页面
// const ComposltionsApiPage =() => import("../views/componets-api/index.vue")
const routes = [
    // {
    //     path: '/list-demo',
    //     name: 'componets-api',
    //     component: ComposltionsApiPage
    // },
    // {
    //     path: '/list-demo',
    //     name: 'ListDemo',
    //     component: ListDemo
    // },
    {
        path: '/home',
        name: 'home',
        component: Home
    },

    {
        path: '/about',
        name: 'about',
        component: About
    },
    {
        path: '/element',
        name: 'element',
        component: ElementPlus
    },
    {
        path: '/user',
        name: 'user',
        component: userCenter,
        redirect: '/user/profile',
        children: [
            {
                path: 'profile',
                name: 'profile',
                component: userProfile,
            },
            {
                path: 'settings',
                name: 'settings',
                component: userSettings,
            }
        ]
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: NotFound
    },
    {
        path: '/vuex',
        name: 'vuex',
        component: VuexPage
    },
]


const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router